<template>
    <picker
        :class="[classes, { disabled: disabled }]"
        :style="[styles]"
        class="picker"
        :mode="mode"
        :range="options1"
        :range-key="labelField"
        :value="value11"
        :disabled="disabled"
        @change="handleChange"
        @cancel="$emit('cancel', { detail: { value: value1 } })"
        @columnchange="handleColumnChange"
    >
        <slot></slot>
    </picker>
</template>

<script>
import baseMixin from '../mixins/base.js'
import formMixin from '../mixins/form.js'
import { deepCopy } from '../utils/util.js'

export default {
    name: 'uxt-picker',
    mixins: [baseMixin, formMixin],
    props: {
        value: {
            type: [Number, Array]
        },
        options: {
            type: Array,
            default() {
                return []
            }
        },
        // options为Array<Object>，指定label字段
        labelField: {
            type: String,
            default: ''
        },
        bgColor: {
            default: 'white'
        }
    },
    data() {
        return {
            options1: null,
            value11: this.getValue()
        }
    },
    computed: {
        mode() {
            if (Array.isArray(this.options[0])) {
                return 'multiSelector'
            }
            return 'selector'
        },
        isCascade() {
            if (
                Array.isArray(this.options[0]) &&
                Array.isArray(this.options[1]) &&
                Array.isArray(this.options[1][0])
            ) {
                return true
            }
            return false
        }
    },
    watch: {
        options(newVal, oldVal) {
            if (this.mode === 'selector') {
                this.value1 = -1
                this.value11 = -1
            } else {
                this.value1 = []
                this.value11 = []
            }
            if (this.isCascade) {
                this.setOptions()
                return
            }
            this.options1 = this.options
        },
        value(newVal, oldVal) {
            this.value1 = this.getValue()
            this.value11 = this.getValue()
            if (this.isCascade) {
                this.setOptions()
            }
        }
    },
    methods: {
        getValue() {
            return this.value !== undefined
                ? deepCopy(this.value)
                : Array.isArray(this.options[0])
                ? []
                : -1
        },
        handleChange(e) {
            this.value1 = this.mode === 'selector' ? Number(e.detail.value) : e.detail.value
            this.$emit('change', { detail: { value: this.value1 } })
            this.$emit('input', this.value1)
        },
        // 联动时动态设置options
        setOptions() {
            if (this.value11.length === 0) {
                this.value11 = this.options.map(() => 0)
            }
            this.options1 = [deepCopy(this.options[0])]
            for (let i = 1; i < this.value11.length; i++) {
                let x = this.options[i]
                for (let j = i; j > 0; j--) {
                    x = x[this.value11[i - j]]
                }
                this.options1.push(deepCopy(x))
            }
        },
        handleColumnChange(e) {
            if (this.isCascade) {
                let column = e.detail.column
                let index = e.detail.value
                if (column === this.options.length - 1) {
                    return
                }

                if (this.value11.length === 0) {
                    this.value11 = this.options.map(() => 0)
                }
                this.value11[column] = index
                for (let i = this.value11.length - 1; i > column; i--) {
                    this.value11[i] = 0
                }

                this.setOptions()
            }
        },
        reset(value) {
            if (this.value1 !== value) {
                this.value1 = value
                this.$emit('change', { detail: { value: this.value1 } })
                this.$emit('input', this.value1)
            }
        }
    },
    created() {
        if (this.isCascade) {
            this.setOptions()
            return
        }
        this.options1 = this.options
    }
}
</script>

<style lang="scss" scoped>
.picker {
    position: relative;
}
</style>
